<template>
    <div class="cart-item">
        <span class="icon-wrap" @click="onClickCartItem">
            <span class="icon" :class="{'color-red': selected}">{{selected ? '&#xe63d;' : '&#xe637;'}}</span>
        </span>
        <img :src="goodDetail ? goodDetail.cover[0] : ''" class="cover" />
        <div class="content">
            <div class="name large-text">{{goodDetail ? goodDetail.name : ''}}</div>
            <div class="info">
                <div class="price color-red">
                    <span class="unit">￥</span>
                    <span class="number">{{priceText}}</span>
                </div>
                <Counter v-model="mutableCount"></Counter>
            </div>
        </div>
    </div>
</template>

<script>
import {
    currency,
} from '@/lib/utils';
import {
    mapState,
} from 'vuex';
import Counter from '@/features/product/counter.vue';

export default {
    name: 'CartItem',
    components: {
        Counter,
    },
    props: {
        /** 封面 */
        cart: {
            type: String,
        },
        /** 是否被选中 */
        selected: {
            type: Boolean,
        },
    },
    data() {
        return {
            /** 可修改的count */
            mutableCount: this.cart.count,
        };
    },
    computed: {
        ...mapState({
            /** 用户基础信息 */
            userBasicInfo: state => state.user.basicInfo,
        }),
        ...mapState('good', {
            /** 规格信息 */
            specMap: state => state.specMap,
            /** 商品详情 */
            detail: state => state.detail,
        }),
        /** 规格信息 */
        spec() {
            return this.specMap[this.cart.specId] || null;
        },
        /** 商品信息 */
        goodDetail() {
            return this.detail[this.cart.goodId] || null;
        },
        /** 价格文本 */
        priceText() {
            if (!this.userBasicInfo || !this.spec) {
                return '';
            }
            const spec = this.spec;
            return currency(this.userBasicInfo.level > 0 && spec.vip_price ? spec.vip_price : spec.price);
        },
    },
    watch: {
        /** 关于数量的修改 */
        '$props.cart.count'(val) {
            this.mutableCount = val;
        },
        mutableCount(val) {
            this.cart.count = val;
        },
    },
    methods: {
        onClickCartItem() {
            this.$emit('select');
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.cart-item {
    display: flex;
    align-items: stretch;
    padding: 10px 10px 10px 15px;
    margin-bottom: 10px;
    background-color: @white-color;
    .icon-wrap {
        display: flex;
        align-items: center;
        padding-right: 8px;
        .icon {
            font-size: 24px;
            line-height: 32px;
        }
    }
    .cover {
        width: 80px;
        height: 80px;
    }
    .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        padding-left: 10px;
        .info {
            display: flex;
            justify-content: space-between;
            .unit {
                .text-tiny();
            }
            .number {
                .text-large();
            }
        }
    }
}
</style>
